<template>
  <el-container>
    <el-aside :width="isCollapse ? '64px': '200px'">
      <div class="menuTitle">@动力云客管理系统</div>
      <el-menu
        active-text-color="#ffd04b"
        class="el-menu-vertical-demo"
        :default-active="currentRouter"
        text-color="#fff"
        background-color="#334157"
        style="border-right: solid 0px"
        :unique-opened="true"
        :collapse="isCollapse"
        :collapse-transition="false"
        :router="true"
      >
        <el-sub-menu
          v-for="(menuPermission, index) in user.menuPermissionList"
          :key="menuPermission.id"
          :index="index"
        >
          <template #title>
            <el-icon><component :is="menuPermission.icon" /></el-icon>
            <span>{{ menuPermission.name }}</span>
          </template>
          <el-menu-item
            v-for="subPermission in menuPermission.subPermissionList"
            :key="subPermission.id"
            :index="subPermission.url"
          >
            <el-icon><component :is="subPermission.icon" /></el-icon>
            {{ subPermission.name }}
          </el-menu-item>
        </el-sub-menu>

        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>市场活动</span>
          </template>
          <el-menu-item index="/dashboard/activity">
            <el-icon><Notification /></el-icon>
            市场活动
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><Magnet /></el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="/dashboard/clue">
            <el-icon><Link /></el-icon>
            线索管理
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><User /></el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/dashboard/customer">
            <el-icon><UserFilled /></el-icon>
            客户管理
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><Wallet /></el-icon>
            <span>交易管理</span>
          </template>
          <el-menu-item index="1-1">交易管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title>
            <el-icon><Memo /></el-icon>
            <span>产品管理</span>
          </template>
          <el-menu-item index="1-1">产品管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="6">
          <template #title>
            <el-icon><Grid /></el-icon>
            <span>字典管理</span>
          </template>
          <el-menu-item index="1-1">字典管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="7">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/dashboard/user">
            <el-icon><User /></el-icon>
            用户管理
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="8">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="1-1">系统管理</el-menu-item>
        </el-sub-menu> -->
      </el-menu>
    </el-aside>

    <el-container class="rightContent">
      <el-header>
        <el-icon class="show" @click="showMenu"><Fold /></el-icon>
        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            {{ user.name }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的资料</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <el-main>
        <router-view v-if="isRouterAlive" />
      </el-main>

      <el-footer>@版权所有 2009-2099 动力节点 北京市通州区马驹桥镇景盛中街17号顺景总部公允B4栋</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import { doGet } from '../http/httpRequest'
import { removeToken, messageTip, messageConfirm } from '../util/util'

export default {
  // 定义组件名
  name: 'DashboardView',
  data() {
    return {
      // 控制仪表盘页面右侧内容体是否显示, true显示
      isRouterAlive: true,
      // 登录用户对象,初始值是空
      user: {},
      // 控制左侧菜单左右的展开和折叠, true是折叠  false是展开
      isCollapse: false,
      // 当前访问路由的路径
      currentRouter: ''
    }
  },
  // 提供者(生产者) -- provide/inject
  provide() {
    return {
      // 提供一个函数, 要求是箭头函数
      reload: () => {
        // 右侧内容隐藏
        this.isRouterAlive = false
        // $nextTick(): 当数据更新了, 在dom中渲染后, 自动执行该函数
        this.$nextTick(function() {
          this.isRouterAlive = true
        })
      },
      // 数字类型
      age: 18
      // 可以提供任何类型的数据
    }
  },
  // vue的生命周期中的一个函数钩子, 该钩子是在页面渲染后执行
  mounted() {
    this.loadLoginUser()
    this.loadCurrentRouterPath()
  },
  methods: {
    // 加载当前路由路径
    loadCurrentRouterPath() {
      let path = this.$route.path
      let arr = path.split('/')
      if(arr.length > 3) {
        this.currentRouter = '/' + arr[1] + '/' + arr[2]
      } else {
        this.currentRouter = path
      }
    },
    // 退出登录
    logout() {
      doGet('/api/logout', {}).then(resp => {
        if (resp.data.code === 200) {
          removeToken()
          window.location.href = '/'
          messageTip('退出成功', 'success')
        } else {
          messageConfirm('退出异常, 是否强制退出?').then(() => {
            // 删除token信息
            removeToken()
            // 跳转登录页
            window.location.href = '/'
          }).catch(() => {
            messageTip('取消强制退出', 'warning')
          })
        }
      })
    },
    // 左侧菜单左右展开和折叠
    showMenu() {
      this.isCollapse = !this.isCollapse
    },
    // 加载当前登录用户
    loadLoginUser() {
      doGet('/api/login/info', {}).then(resp => {
        console.log(resp);
        this.user = resp.data.data
      })
    }
  }
}
</script>

<style>
  .el-aside {
    background: #1a1a1a;
  }
  .el-header {
    height: 35px;
    background: azure;
    line-height: 35px;
  }
  .el-footer {
    height: 35px;
    background: aliceblue;
    /* 上下居中 */
    line-height: 35px;
    /* 文本居中 */
    text-align: center;
  }
  .rightContent {
    height: calc(100vh);
  }
  .menuTitle {
    height: 35px;
    color: #f9f9f9;
    text-align: center;
    line-height: 35px;
  }
  .show {
    cursor: pointer;
  }
  .el-dropdown {
    float: right;
    line-height: 35px;
  }
</style>